<template>
	<div class="role">
		<div class="title">
			<div class="key">
				<div class="item">关键字：</div>
				<div class="item">
					<el-input v-model="keywords" clearable placeholder="请输入关键字" @change="search"></el-input>
				</div>
				<div class="item">
					<span>状态：</span>
					<el-select v-model="status" clearable @change="search" placeholder="请选择状态">
						<el-option label="正常" value="1"></el-option>
						<el-option label="禁用" value="0"></el-option>
					</el-select>
				</div>
				<div class="item">
					<el-button type="primary" @click="search">查询</el-button>
				</div>
			</div>
			<div class="item" v-if="power.includes('product_line_add')">
				<el-button type="primary" @click="addForm">新增</el-button>
			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}">
				<el-table-column
					align="center"
					type="index"
					label="序号"
					width="50">
				</el-table-column>
				<el-table-column align="center" property="name" label="产品线"></el-table-column>
				<el-table-column align="center" property="status_show" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0" type="primary" effect="plain">禁用</el-tag>
						<el-tag v-if="scope.row.status == 1" type="success" effect="plain">正常</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<span><a  @click="toDetails(scope.row)">查看</a></span>
						<span><a > | </a></span>
						<span><a @click="toBianji(scope.row)" :disabled="!power.includes('product_line_update')">编辑</a></span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center"
				:total="tableTotal">
			</el-pagination>
		</div>
		<addForm ref="addForm"></addForm>
		<editForm ref="editForm"></editForm>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import addForm from "./model/addForm";
import editForm from "./model/editForm";
import {productLine} from '@/api/user'
export default {
	name: 'productLine',
	components:{
		addForm,
		editForm
	},
	data(){
		return {
			options:{},
			value: '',
			size: 10,
			current: 1,
			total: 0,
			initTableList: [],
			keywords:'',
			tableTotal:1,
			tableSize:10,
			tableCurrent:1,
			status:'',
			power:[]
		}
	},
	created() {
		// this.power = sessionStorage.getItem('power').split(',')
		// this.initTable()
	},
	mounted() {
		this.power = sessionStorage.getItem('power').split(',')
		this.initTable()
	},
	methods:{
		search(){
			productLine({
				keywords:this.keywords,
				status:this.status
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			productLine({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}

			})
		},
		initTable(){
			productLine().then(response => {
				if(response.code == 200){
					this.initTableList = response.data.data
					this.tableTotal = response.data.totalCount
				}
			})
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		},
		toBianji(data){
			this.$refs.editForm.dialogFormVisible = true
			this.$refs.editForm.initData(2,data)
		},
		toDetails(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(3,data)
		},
		getLeader(data){
			let str = ""
			if(data.length > 0){
				data.filter(item => {
					str += item.name+' '
				})
				return str
			}
			else {
				return '暂无'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.title{
		width: 100%;
		padding: 20px;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		margin: 5px 0;
		.key{
			display: flex;
			.item:first-child{
				line-height: 36px;
			}
			.item:nth-child(3){
				margin: 0 5px;
			}
		}
	}
}
</style>
